@charset "utf-8";
*{
    margin: 0;
    padding: 0;
}
html,body{
    height: 100%;
    width: 100%;
    background: url(../img/dw1.png), #bf0c21;
    
}
.contain{
    font-size: 0;
    width: 100%;
    height: 100%;
    
    position: relative;
    i{
        width: 0.4rem;
        height: 0.4rem;
        line-height: 0.4rem;
        background: #e7c598;
//      border: 1px solid red;
        border-radius: 0.3rem;
        color: #bf0c21;
        position: fixed;
        left: 5.7rem;
        top: 0.4rem;
        text-align: center;
        animation-name: yinyue;
        animation-iteration-count: infinite;
        animation-duration:2s;
        animation-timing-function: linear;
    }
    @keyframes yinyue{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

    audio{
        display: none;
    }
    .logo{
        height: 0.43rem;
        width: 2.06rem;
        margin:0 auto;

        img{
        margin-top: 1.36rem;
        height: 100%;
        animation-name: log;
        animation-duration:1s;
        }
    }
    @keyframes log{
    0%{
        transform: rotateX(360deg);
    }
    100%{
        transform: rotateX(0deg);
    }
}   
//    红酒图片
    .hongjiu{
        position: absolute;
        width: 4rem;
        left: 1.9rem;
        
    }
    //你办我送
    .text{
        height: 2.07rem;
        width: 3.78rem;
        margin:0 auto;
        margin-top: 2.23rem;
        margin-left: 1.5rem;
        img{
            transform:translate(-1rem,-1rem) rotateY(0deg);
            animation-fill-mode: forwards;
            opacity: 0;
        }
        img:nth-child(1){
            height: 0.95rem;
            width: 1.04;
            animation-name: txt;
            animation-duration:1s;
        }
        img:nth-child(2){
            height: 0.95rem;
            width: 1.04;
            animation-name: txt;
            animation-duration:1s;
            animation-delay: 200ms;
        }
        img:nth-child(3){
            height: 0.95rem;
            width: 1.04;
            animation-name: txt;
            animation-duration:1s;
            animation-delay: 300ms;
        }
        img:nth-child(4){
            height: 0.95rem;
            width: 1.04;
            animation-name: txt;
            animation-duration:1s;
            animation-delay: 400ms;
        }
        img:nth-child(5){
            height: 0.95rem;
            width: 1.04;
            animation-name: txt;
            animation-duration:1s;
            animation-delay: 500ms;
        }
        img:nth-child(6){
            height: 0.95rem;
            width: 1.04;
            animation-name: txt;
            animation-duration:1s;
            animation-delay: 600ms;
        }
        img:nth-child(7){
            height: 0.95rem;
            width: 1.04;
            animation-name: txt;
            animation-duration:1s;
            animation-delay: 700ms;
        }
        img:nth-child(8){
            height: 0.95rem;
            width: 1.04;
            animation-name: txt;
            animation-duration:1s;
            animation-delay: 800ms;
        }
    }
    @keyframes txt{
    0%{
        transform:translate(-1rem,-1rem) rotateY(0deg);
    }
    100%{
        transform:translate(0rem) rotateY(360deg);
        opacity: 1;
    }
}
//   按钮1
    .anniu{
         width: 3.5rem;
        height: 0.5rem;
        margin: 0 auto;
        height: 0.5rem;
        position: absolute;
        animation-name: yanchi;
        opacity: 0;
        animation-delay: 1s;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        top: 9.3rem;
        left:1.5rem;
        img{
            height: 100%;
            position: relative;
        }
        p{
            font-size: 0.23rem;
            position: absolute;
            top:0.09rem;
            left:1.1rem;
            color: #e7c598;
            
        }
    }
    .donghua{
        position: absolute;
        background: white;
        width: 0.2rem;
        height: 0.5rem;
        left: 1.5rem;
        top: 9.3rem;
        opacity: 0;
        animation-timing-function: ease-in-out;
        animation-name:an;
        transform: skewX(-25deg);
        animation-duration: 1s;
//      animation-iteration-count: infinite;
    }
    @keyframes an{
        0%{
            transform:skewX(-25deg) translateX(0rem);
            opacity: 0;
        }
        50%{
            transform:skewX(-25deg) translateX(3.2rem);
            opacity: 0.5;
        }
        100%{
            transform:skewX(-25deg) translateX(0rem);
            opacity: 0;
        }
        
    }
    .donghua2{
        position: absolute;
        background: white;
        width: 0.2rem;
        height: 0.5rem;
        left: 1.5rem;
        top: 10.15rem;
        opacity: 0;
        animation-timing-function: ease-in-out;
        animation-name:an;
        transform: skewX(-25deg);
        animation-duration: 1s;
//      animation-iteration-count: infinite;
    }
    //按钮2
    .anniu2{
        width: 3.5rem;
        height: 0.5rem;
        margin-top: 0.1rem;
        animation-name: yanchi;
        animation-delay: 1.5s;
        animation-duration: 1s;
        opacity: 0;
        animation-fill-mode: forwards;
        position: absolute;
        top: 10rem;
        left:1.5rem;
        a{
            height: 0.5rem;
            width: 3.5rem;
            position: relative;
            display: inline-block;
            overflow:hidden;
            img{
                width:100%;
            }
        }
        p{
            font-size: 0.23rem;
            position: absolute;
            top:0.09rem;
            left:1rem;
            color: #e7c598;
        }
    }
    @keyframes yanchi{
        0%{
             opacity: 0;
        }
        100%{
            opacity: 1;
            
        }
    }
    //弹出框
    .tanchu{
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        overflow: hidden;
        display: none;
        position: absolute;
        top: 0rem;
        .guize{
            width: 4.13rem;
            height: 2.5rem;
            border: 1px solid #e7c598;
            border-radius: 0.1rem;
            background: #e7c598;
            margin: 0 auto;
            top: 3.5rem;
            overflow:hidden;
            position: absolute;
            left:1.2rem;
            animation-name: log;
            animation-duration:1s;
            z-index:1;
           
            .close{
                width: 0.36rem;
                height: 0.36rem;
                background: #BF0C21;
                border-radius: 0.2rem;
                color: #dc9176;
                float: right;
                margin-right: 0.16rem;
                margin-top: 0.11rem;
                font-size: 0.4rem;
                line-height: 0.25rem;
                text-align: center;
            }
            p{
                font-size: 0.21rem;
                text-align: center;
                color: #bf0c21;
            }
            p:nth-child(2){
                margin-top: 0.5rem;
            }
            p:nth-child(3){
                margin-top: 0.1rem;
            }
            span{
                font-size: 0.21rem;
                color: #bf0c21;
                margin-left: 1.3rem;
            }
            a{
            text-decoration: none;
            }
            .chakan{
                width: 1.95rem;
                height: 0.38rem;
                border: 1px solid #bf0c21;
                background: #bf0c21;
                border-radius: 0.05rem;
                font-size: 0.2rem;
                color: #e7c598;
                margin-left: 1.1rem;
                line-height: 0.4rem;
                margin-top: 0.3rem;
            }
        }
    }
}

//适配ipad 媒体查询
@media(max-width:320px){
    .contain{
        height: 100%;
       .logo{
        img{
            margin-top: 0.36rem;
        }
    }
    .text{
        margin-top: 1rem;
    } 
    .anniu{
          top: 8.3rem;
      }
      .anniu2{
          top: 8.8rem;
      }
    .donghua{
        top: 8.3rem;
    }
    .donghua2{
        top: 8.9rem;
    }
    .tanchu{
        height: 11.8rem;
    }
    }               
}

//ipad适配
@media only screen and (min-width: 415px) and (max-width: 1024px) {
    .contain .logo img{
        margin-top: 0.25rem;
    }
    .contain .text{
        width:2.94rem;
        height: 2.0rem;
        margin: 0rem auto ;
        margin-top: 0.4rem;
        img{
            height: 0.8rem !important;
        }
    }
    .contain .hongjiu{
        width: 3.5rem;
    }
    .contain .anniu{
        top: 7rem;
    }
    .contain .donghua{
        top: 7rem;
    }
    .contain .anniu2{
        top: 7.6rem;
    }
    .contain .donghua2{
        top: 7.75rem;
    }
}
//iphone5适配
@media only screen and (min-height: 568px) and (max-width: 767px) {
    .contain .logo img{
        margin-top: 0.8rem;
    }
    .contain .text{
        width:2.94rem;
        height: 2.0rem;
        margin: 0rem auto ;
        margin-top: 1.4rem;
        img{
            height: 0.8rem !important;
        }
    }
    .contain .hongjiu{
        width: 4.5rem;
        left: 1.58rem;
    }
    .contain .anniu{
        top: 9.5rem;
    }
    .contain .donghua{
        top: 9.5rem;
    }
    .contain .anniu2{
        top: 10.2rem;
    }
    .contain .donghua2{
        top: 10.35rem;
    }
    .contain i{
        top: 0.85rem;
    }
}